// 自定义Hook：useLocalStorage
// 用于在React组件中方便地使用localStorage，提供类似useState的API
import { useState, useEffect } from 'react'

// 泛型函数，支持任意类型的数据存储
export function useLocalStorage<T>(key: string, initialValue: T) {
  // 获取初始值：从localStorage读取或使用默认值
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = window.localStorage.getItem(key) // 从localStorage获取数据
      return item ? JSON.parse(item) : initialValue // 如果存在则解析，否则使用初始值
    } catch (error) {
      console.error(`Error reading localStorage key "${key}":`, error) // 读取错误时记录日志
      return initialValue // 出错时返回初始值
    }
  })

  // 返回一个包装过的setter函数，用于更新状态和localStorage
  const setValue = (value: T | ((val: T) => T)) => {
    try {
      // 允许值是一个函数，这样我们就有了与useState相同的API
      const valueToStore = value instanceof Function ? value(storedValue) : value
      setStoredValue(valueToStore) // 更新React状态
      window.localStorage.setItem(key, JSON.stringify(valueToStore)) // 同步到localStorage
    } catch (error) {
      console.error(`Error setting localStorage key "${key}":`, error) // 设置错误时记录日志
    }
  }

  // 返回当前值和setter函数，与useState保持一致的API
  return [storedValue, setValue] as const
} 